<template>
	<div class="recommend-list">
		<ul class="pl30rem pr30rem list-ul">
		 	<router-link tag="li" to="/product/detail/commodity-detail" class="mb80rem">
		 		<img class="responsive-img" src="../assets/img3.png" alt="">
		 		<p class="mt20rem fs30rem c333 bold">金毛狗窝可拆洗泰迪狗狗床狗垫子四季小</p>
		 		<div class="layout">
					<p><strong class="mr5rem fs34rem red bold">￥0</strong><i class="red fs16rem experience">预购价</i></p>					
					<del class="fs20rem c999">原价:1442元</del>
				</div>
				<div class="flex flex-start">
					<strong class="mr10rem fs20rem c38 flex-center">预约倒计时</strong>
					<countdown></countdown>
				</div>
		 	</router-link>		 	
		</ul>
	</div> 	
</template>

<script>
	import Countdown from '@/components/Countdown';

	export default{
		name: 'ProductItem',
		// props: ["lists"]
		components: {
			Countdown
		}
	}
</script>

<style lang="less">
	.recommend-list{
		.list-ul{
			overflow: hidden;
			display: grid;
		    grid-template-columns: 1fr 1fr;
		    grid-gap: 0.5rem;
			li{
				.count-down{
					span{
						background-color: #383838;
					}
					strong{
						i{
							background-color: #383838;
						}
					}
				}
				.experience{
		    		border-radius: 5/28rem;
		    		background-color: #ffdee5;
		    		padding:2/28rem 5/28rem;
		    		vertical-align: top;
	    		}
			}
		}
	}	
</style>